<template>
  <div class="user">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model="form"
        :option="option"
        :page="page"
        :table-loading="listLoading"
        :before-open="handleOpenBefore"
        :data="list"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-update="update"
        @row-save="create"
        @row-click="rowClick"
      >
        <template slot="tabForm" slot-scope="scope">
          <div>
            <option-tab :data="scope.row" :table-i-d="tableID" />
          </div>
        </template>
        <template slot="editForm" slot-scope="scope">
          <div>
            <option-tab :data="scope.row" :table-i-d="tableID" />
          </div>
        </template>
        <!--  -->
        <template slot="menuLeft">
           <el-button
            @click="topToOption()"
          >配置
          </el-button>
          <el-button
            @click="topHandleTest()"
          >演示
          </el-button>
          <el-button
            @click="topDeletes()"
          >删除
          </el-button>
          <el-button
            @click="topHandleUpdate()"
          >源码
          </el-button>
        </template>
        <!--  -->

        <!-- <template slot="menu" slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="toOption(scope.row)"
          >配置
          </el-button>
          <el-button
            type="text"
            icon="el-icon-view"
            @click="handleTest(scope.row, scope.index)"
          >演示
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="deletes(scope.row)"
          >删除
          </el-button>
          <el-button
            type="text"
            icon="el-icon-view"
            @click="handleUpdate(scope.row, scope.index)"
          >源码
          </el-button>
        </template> -->
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
import optionTab from './edit/components/optionTab'
// import { mapGetters } from 'vuex'
import { formCreate } from "@/api/index";
export default {
  name: 'TableUser',
  components: {
    optionTab
  },
  data() {
    return {
      option: tableOption,
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条,
        isAsc: false // 是否倒序
      },
      list: [],
      listLoading: true,
      form: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
     rowClick(row,event,column) {
      //  this.selectionClear()
       console.log(row,event,column,'row,event,column')
       console.log(this.$refs.crud,'this.$refs.crud')
      // 点击表格行
      if (this.$refs.crud.$refs.table) {
        this.$refs.crud.$refs.table.clearSelection();
      }
      this.$refs.crud.$refs.table.toggleRowSelection(row, true);
    },
    getList(page, params) {
      if (params === undefined || params == null || params === '') {
        params = {}
      }
      this.listLoading = false
      params.current = page.current - 1
      params.size = page.size
      // doGet('/online/tableInfo/page', params).then((res) => {
      //   this.list = res.data.data.dataList
      //   this.page.total = res.data.data.totalElements
      //   this.listLoading = false
      // })
       formCreate.tableInfoPage(params).then((res) => {
        this.list = res.data.dataList
        this.page.total = res.data.totalElements
      })
    },
    sizeChange(size) {
      this.page.size = size
      this.getList(this.page)
    },
    currentChange(current) {
      this.page.current = current
      this.getList(this.page)
    },
    handleFilter(param, done) {
      this.page.current = 1
      this.getList(this.page, param)
      done()
    },
    handleRefreshChange() {
      this.getList(this.page)
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      // 若是编辑、查看回显名称
      if (['edit', 'views'].includes(type)) {
      } else if (type === 'add') {
      }
      show()
    },
    handleUpdate(row, index) {
      const params = {
        id: row.id
      }
      this.tableID = row.id
      this.$refs.crud.rowEdit(row, index)
    },
    topHandleUpdate(){
       let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
        const params = {
        id: selection[0].id
      }
      this.tableID = selection[0].id
      this.$refs.crud.rowEdit( selection[0],  selection[0].$index)


    },
    // 跳转配置页面
    toOption(row, index) {
      this.$router.push({
        path: `/tableInfo/editTable`,
        query: row
      })
    },
     topToOption(row, index) {
      let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      this.$router.push({
        path: `/tableInfo/editTable`,
        query: selection[0]
      })
    },
    
    // test() {
    //   this.listLoading = true
    //   doPost('/online/tableInfo/test').then((res) => {
    //     this.listLoading = false
    //     this.$notify.error(res.data.msg)
    //   })
    // },
    create(row, done, loading) {
      // this.listLoading = true
      // doPost('/online/tableInfo/save', this.form)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.getList(this.page)
      //       done()
      //       this.$notify.success('创建成功')
      //       return false
      //     } else {
      //       this.listLoading = false
      //       this.$notify.error(res.data.msg)
      //     }
      //     loading()
      //   })
      //   .catch(() => {
      //     loading()
      //   })
       formCreate.tableInfoSave(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.getList(this.page)
            done()
            this.$notify.success('创建成功')
            return false
          } else {
            // this.listLoading = false
            this.$notify.error(res.msg)
          }
          loading()
        })
        .catch(() => {
          loading()
        })
    },
    handleTest(row, index) {
      // 跳转到表单分页模板
      this.$router.push({
        path: '/template/listPage',
        query: row
      })
    },
     topHandleTest() {
        let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      // 跳转到表单分页模板
      this.$router.push({
        path: '/template/listPage',
        query: selection[0]
      })
    },
    
    update(row, index, done, loading) {
      // doPut('/online/tableInfo/update', this.form)
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       this.getList(this.page)
      //       done()
      //       this.$notify.success('更新成功')
      //       return
      //     } else {
      //       this.$notify.error(res.data.msg)
      //       return
      //     }
      //     loading()
      //   })
      //   .catch(() => {
      //     loading()
      //   })
       formCreate.tableInfoUpdate( this.form)
        .then((res) => {
          if (res.data.code == 200) {
            this.getList(this.page)
            done()
            this.$notify.success('更新成功')
            return
          } else {
            this.$notify.error(res.msg || '失败')
            return
          }
          loading()
        })
        .catch(() => {
          loading()
        })
    },
    deletes(row) {
      this.$confirm('此操作将永久删除该调数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // doDelet('/online/tableInfo/delete/' + row.id)
        //   .then((res) => {
        //     if (res.data.code == 200) {
        //       this.getList(this.page)
        //       this.$notify.success('删除成功')
        //     } else {
        //       this.$notify.error(res.data.msg)
        //     }
        //   })
        //   .catch(() => {
        //     this.$notify.error('服务异常')
        //   })
         formCreate.tableInfoDelete(row.id)
          .then((res) => {
            if (res.code == 200) {
              this.getList(this.page)
              this.$notify.success('删除成功')
            } else {
              this.$notify.error(res.msg)
            }
          })
          .catch(() => {
            this.$notify.error('服务异常')
          })
      })
    },
     topDeletes() {
         let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      this.$confirm('此操作将永久删除该调数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         formCreate.tableInfoDelete(selection[0].id)
          .then((res) => {
            if (res.code == 200) {
              this.getList(this.page)
              this.$notify.success('删除成功')
            } else {
              this.$notify.error(res.msg)
            }
          })
          .catch(() => {
            this.$notify.error('服务异常')
          })
      })
    },
    handleOption(row) {
      this.$router.push({
        path: `/online/tableInfo/option/${row.id}`,
        query: row
      })
    }
  }
}

export const tableOption = {
  border: false,
  index: false,
  indexLabel: '序号',
  stripe: false,
  menuAlign: 'center',
  searchMenuSpan: 6,
  dialogFullscreen: true,
  editBtn: false,
  cancelBtn: false, // 隐藏行编辑取消按钮
  updateBtn: false, // 隐藏行编辑修改按钮
  editBtnTitle: '配置',
  delBtn: false,
  align: 'center',
  addBtn: false,
  editTitle: "源码",
  selection: true,
  menu: false,
  column: [
    {
      fixed: true,
      label: 'id',
      prop: 'id',
      span: 24,
      hide: true,
      editDisabled: true,
      editDisplay: false,
      addDisplay: false
    },
    // {
    //   fixed: true,
    //   label: '数据源',
    //   prop: 'databaseId',
    //   type: 'select',
    //   dicUrl: '/api-sys/sys/dict/autoCache/D000008',
    //   editDisplay: true,
    //   editDisabled: true,
    //   addDisplay: true,
    //   rules: [
    //     {
    //       required: true,
    //       trigger: 'blur',
    //       message: '请输入数据源'
    //     }
    //   ],
    //   search: true,
    //   span: 12
    // },
    {
      fixed: true,
      label: '表名',
      prop: 'tableName',
      editDisplay: true,
      editDisabled: true,
      addDisplay: true,
      search: true,
      span: 12
    },
    {
      fixed: true,
      label: '标题',
      prop: 'tableDes',
      editDisplay: true,
      editDisabled: true,
      addDisplay: true,
      search: true,
      span: 12
    },
    {
      fixed: true,
      label: '地址',
      prop: 'tableUrl',
      editDisplay: true,
      editDisabled: false,
      addDisplay: true,
      search: true,
      span: 12
    },
    {
      fixed: true,
      width: 80,
      label: '分页',
      prop: 'isPage',
      type: 'select',
      dicUrl: '/api-sys/sys/dict/autoCache/D000006',
      editDisplay: true,
      editDisabled: true,
      addDisplay: true,
      rules: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入是否分页'
        }
      ],
      search: true,
      span: 12
    },
    {
      fixed: true,
      width: 80,
      label: '树形',
      prop: 'isTree',
      type: 'select',
      dicUrl: '/api-sys/sys/dict/autoCache/D000007',
      editDisplay: true,
      editDisabled: true,
      addDisplay: true,
      rules: [
        {
          required: true,
          trigger: 'blur',
          message: '请输入是否树形'
        }
      ],
      search: true,
      span: 12
    },
    {
      fixed: true,
      label: '创建时间',
      prop: 'createTime',
      editDisplay: false,
      editDisabled: true,
      addDisplay: false,
      span: 12
    },
    {
      labelWidth: 0,
      label: '',
      prop: 'tab',
      span: 24,
      hide: true,
      formslot: true
    }
  ]
}
</script>
<style lang="scss" scoped>
/deep/.avue-crud__right {
  /deep/.el-button{
    min-width: 10px;
  }
}
</style>
